<template>
  <div class="localForage">
    <el-button type="primary" @click="getLocalData">获取localforage的值</el-button>
    <el-button type="primary" @click="clearLocalData">清除单个localforage的值</el-button>
    <el-button type="primary" @click="clearAllLocalData">清除所有localforage的值</el-button>
  </div>
</template>
<script>
import localforage from 'localforage'
export default {
  name: 'LocalForage',
  data() { 
    return {
      myIndexedDB:null
    }
  },
  mounted() {
    this.myIndexedDB = localforage.createInstance({
      name: 'myIndexedDB',
    })
    this.myIndexedDB.setItem('username','123456')
    this.myIndexedDB.setItem('password', atob('123456'))
    localforage.setItem('key', 'value')
    localforage.setItem('token', ['YYYYMMDDHHmmss'])
   },
  methods: {
    async getLocalData() { 
      const username = await this.myIndexedDB.getItem('username')
      console.log(username);
      const password = await this.myIndexedDB.getItem('password')
      console.log(password ? btoa(password): null);
      const key = await localforage.getItem('key')
      console.log(key);
      const token = await localforage.getItem('token')
      console.log(token);
    },
    async clearLocalData() { 
      await this.myIndexedDB.removeItem('username')
      await localforage.removeItem('key')
    },
    async clearAllLocalData() { 
       await this.myIndexedDB.clear()
      await localforage.clear()
    }
  }
 
}
</script>